<template>
	<div class="page clear" style="text-align: left;">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">知识库管理</span>　|　<span>添加文章</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<div id="addform">
		<el-form :model="addArticleForm" block >
			<el-form-item label="标题:" :label-width="formLabelWidth" >
				<el-input v-model="addArticleForm.title" auto-complete="off" class="inpu"  autofocus placeholder="输入文章标题"></el-input>
			</el-form-item>
			<el-form-item label="分类:" class="formline" :label-width="formLabelWidth">
				<el-select v-model="addArticleForm.article_type_id" class="inpu">
					<el-option v-for="item in articleTypes" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select><br>
			</el-form-item>
			<el-form-item class="formline" label="是否首页:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
				<el-switch style="display:inline-block;vertical-align:top;" v-model="addArticleForm.is_index" :width="stateWidth" class="demo"
				 active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one"
				 :inactive-value="zero">
				</el-switch>
			</el-form-item>
			<el-form-item class="formline" label="是否推荐:" :label-width="formLabelWidth" style="margin-top:-0.3rem;">
				<el-switch style="display:inline-block;vertical-align:top;" v-model="addArticleForm.is_recommend" :width="stateWidth" class="demo"
				 active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one"
				 :inactive-value="zero">
				</el-switch>
			</el-form-item>
			<el-form-item label="排序:" class="formline" :label-width="formLabelWidth">
				<el-input v-model="addArticleForm.list_order" auto-complete="off" class="inpu" style="width:2.5rem;" spellcheck="false"></el-input>
			    <el-tooltip placement="top" effect="light" style="margin-left:0.1rem;margin-top:-2px;">
			    	<div slot="content" style="line-height:0.4rem;color:red;font-size:0.3rem!important;">请输入自然数(0,1,2,3,...),默认以添加的先后顺序排序</div>
			    	<span class="sortIcon" style="color:red;">?</span>
			    </el-tooltip>
				<!-- <span class="tip">请输入自然数(0,1,2,3,...),默认以添加的先后顺序排序</span> -->
			</el-form-item>
			<el-form-item label="图片:" :label-width="formLabelWidth" class="formline">
				<div class="newimg">
					<img id="new" src="../../static/noimg.png" class="thumb" />
					<input type="file" id="addid" @change="addUpload" />
					<div class="tip" style="display: block;">点击上图可上传（或更换）图片</div>
				</div>
			</el-form-item>
		</el-form>
		<div  style="text-align: left;margin:0.3rem 0 0 0.7rem">
			<el-button type="success" size="small" @click="addArticle">保存</el-button>
			<el-button type="primary" size="small" @click="resetForm">重置</el-button>
		</div>
		</div>
		<div class="editBox">
			<el-form :model="addArticleForm" block>
				<el-form-item label="概述:" :label-width="formLabelWidth" >
					<el-input v-model="addArticleForm.summary" auto-complete="off" class="inpu" type="textarea" :rows="2" style="width:800px;" placeholder="输入描述内容"></el-input>
				</el-form-item>
				<el-form-item  class="formline" label="内容:" :label-width="formLabelWidth" >
					  <vue-ueditor-wrap v-model="addArticleForm.content" :config="editorConfig" editor-id="editor-demo-01"  class="edui-container" ></vue-ueditor-wrap>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import VueUeditorWrap from 'vue-ueditor-wrap';
	import { getArticleTypes } from "../request.js"
	export default {
		name: 'addArticle',
		data() {
			return {
				one:1,
				zero:0,
				editorConfig: {
					  //是否允许进入编辑器的div标签自动变成p标签
					  allowDivTransToP:false,
					  //编辑器自动被内容层高
					  autoHeightEnabled:true,
					  //初始容器高度
					  initialFrameHeight:300,
					  //初始容器宽度
					  initialFrameWidth:800,
					  //初始内容
					  //initialContent:"<h2 style='text-align:center'>这里是标题</h2></br><p>这里是正文</p>",
					  //UEditor的全局配置，类型为对象，默认为空对象
					  // UEDITOR_CONFIG:{
						//  initialStyle:{
						//  'background-color':'red',
						//  'padding':20
						//  },
						// },

					  enableAutoSave:false, // 自动保存
				      // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
				      UEDITOR_HOME_URL: "/static/UEditor/",
				      // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
				      //serverUrl: "http://120.253.60.248:18080/uEditor/php/controller.php?token="+localStorage.getItem("attoken"),
				      serverUrl: this.$baseurl+ "api/editor/server?token="+localStorage.getItem("attoken")
				},
				formLabelWidth: '2rem',
				stateWidth: 66,
				articleTypes:[],
				ws:null,
				addArticleForm: {
					"title": "",                  //标题
					"article_type_id": '',        //'文章类型ID',
					//"image": '',                  //'图片',
					"summary": "",                //'概述',
					"content": "<h2 style='text-align:center'>这里是标题</h2></br><p>这里是正文</p>",                //'内容',
					"is_index":0,               //'是否首页',
					"is_recommend":0,           //'是否推荐',
					//"is_verify": '',            //'是否通过审核',
					//"author": '',               //'作者',
					//"from":'',                  //'文章来源',
					//"link":'',                  //链接地址',
					"list_order":1,              // '排序',
					//"visit_count":'',           // '浏览次数',
					//"update_time":'',           // '更新时间',
					//"create_time":''            //  '创建时间',
				},
            }
		},

		components: {
		    VueUeditorWrap
		},
		created(){
			this.getTypes();
		},

		methods: {
			getTypes() {
				this.articleTypes = [];
				getArticleTypes().then(data => {
					this.articleTypes = data;
					this.addArticleForm.article_type_id = this.articleTypes[0].value;
					///console.log(this.articleTypes);
				});
			},

			resetForm() {
				var that=this;
				this.addArticleForm= {
					"title": "",                  //标题
					"article_type_id":that.articleTypes[0].value,        //'文章类型ID',
					//"image": '',                  //'图片',
					"summary": "",                //'概述',
					"content": "<h2 style='text-align:center'>这里是标题</h2></br><p>这里是正文</p>",                //'内容',
					"is_index":0,               //'是否首页',
					"is_recommend":0,           //'是否推荐',
					"list_order":1,              // '排序',
				};
			},
			goBack() {
				this.$router.go(-1);
			},
			addUpload() {
			    this.ws = null;
			    var that = this;
			    var fileLen = document.getElementById('addid').files;
			    this.ws = fileLen[0];
			    var reads = new FileReader();
			    reads.readAsDataURL(this.ws);
			    reads.onload = function(e) {
					console.log(this.result)
			        document.getElementById('new').src = this.result;
			    }
			},
            addArticle() {
                var that = this;
				var that = this;
				var upform = new FormData();
				for (var key in this.addArticleForm) {
				    upform.append(key, that.addArticleForm[key]);
				}
				upform.append("image", that.ws);
				this.$http({
					method: 'post',
					url: 'api/article/add',
					data: upform
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,添加文章成功!',
							type: 'success',
							center: true
						});
						this.$router.go(-1);
					}
					//console.log("charu")
				}).catch(error => {

					console.log(error);
				});
			}
		}
	}
</script>

<style scoped>
	@media all and (max-width:1600px) {
		.formline{
			margin-top:-0.3rem!important;
		}
	}
	.inpu /deep/ .el-input__inner{
		padding-left:4px;
	}
	.inpu /deep/ .el-textarea__inner{
		padding-left:4px;
	}

	#addform {
		float:left;
		text-align: left;
		margin:0;
		margin-top: 0.3rem;
		min-width:25%;
		/* border:1px solid red; */

	}

	.editBox{
		float:left;
		display:inline-block;
		margin:0;
		margin-top:0.3rem;
	}

	.inpu {
		width:5rem;
	}

	#upload {
	    position: relative;
	    left: -1.4rem;
	    top: -0.3rem;
	    z-index: 11;
	}

	#addid {
	    width: 1.5rem;
	    height: 1.5rem;
	    /* border:1px solid red; */
	    overflow: hidden;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 12;
	    opacity: 0;
	}

	.thumb {
	    width: 1.5rem;
	    height: 1.5rem;
	}

	.formline {
	    /* border:1px solid red; */
		/* height:0.9rem; */
	    width: 100%;
	    margin-top: -0.2rem;
	}

	.tip {
	    display: inline-block;
	    color: #FF5722;
	    font-size: 0.25rem;
	    line-height: 0.35rem;
	    /* margin-top:0!important; */
	}

    .sortIcon {
		display:inline-block;
		vertical-align: middle;
		margin-left:-0.1rem;
	    width: 0.3rem!important;
	    height: 0.3rem;
	    font-size: 0.3rem;
	    line-height: 0.3rem;
	    text-align: center;
	    color: #999;
	    background-color: #ccc;
		border-radius:50%;
	}

	.formline  /deep/ .el-switch{
		width:130px!important;
	}

	.demo /deep/ .el-switch__label--right {
	    position: relative!important;
	    right: -68px!important;
	    top: -21px!important;
	    color:#fff;
	}
</style>
